const Modal = Vue.defineComponent({
	props: {
		value: Boolean
	},
	data() {
		return {
			show: this.value
		}
	},
	watch: {
		value(val) {
			this.show = val
		},
		show(val){
			this.$emit('update',val)
		}
	},
	methods: {
		confirm() {
			this.show = false
			alert('确认')
		}
	},
	template: `
<div class="modal" id="myModal" v-if="show">
			    <div class="modal-content">
			    <div class="modal-header">
			        <h2 class="modal-title">这是标题</h2>
			        <span class="close-btn" @click="show=false">&times;</span>
			    </div>
			    <div class="modal-body">
			        <p>这是一个简单的弹窗示例。你可以在这里放置任何内容，比如表单、图片或文本。</p>
			    </div>
			    <div class="modal-footer">
			        <button class="btn" @click='confirm'>确认</button>
			        <button class="btn" @click='show=false' style="background-color: #f44336;">取消</button>
			    </div>
			    </div>
			</div>
			`
})
